<template>
	<view class="container">
		<view id="fix-title" class="fix-title">
			<location-search @hideModal="hideModal" :word="word" @areaCode="getAreaCode"></location-search>
			<!-- {{ usersObj.region }}~~~~ -->
			<!-- 条件搜索 keys-->
			<view class="condition">
				<view @click="handleTabChange(0)">
					<text :style="{ color: usersObj.orderByColumn == 'distance' ? '#F39B19' : '' }">附近</text>
				</view>
				<view @click="handleTabChange(1)">
					<text :style="{ color: usersObj.orderByColumn == 'receiveNum' ? '#F39B19' : '' }">成交量</text>
				</view>
				<view @click="handleTabChange(2)">
					<text :style="{ color: usersObj.orderByColumn == 'integrity' ? '#F39B19' : '' }">诚信值</text>
				</view>
				<view @click="handleTabChange(3)">
					<text :style="{ color: screenFlag ? '#F39B19' : '#402110' }">筛选</text>
					<image
						:src="screenFlag ? 'http://images.linglinggong.net/wgc_icon/3.png' : 'http://images.linglinggong.net/wgc_icon/1.png'"
						mode="aspectFill"></image>
				</view>
			</view>
			<!-- 遮罩层 -->
			<view class="mask" :class="screenFlag ? 'show' : ''" @touchmove.stop.prevent="moveHandle"
				@click="hideModal"></view>
			<!-- 白色筛选框 -->
			<view class="screen">
				<!-- 筛选 -->
				<view class="filter-screen" :class="screenFlag ? 'show' : ''">
					<view class="title">性别</view>
					<view class="sex-list">
						<view :class="comfirmObj.sex === 0 ? 'select' : ''" @click="handleChooseSex(0)">男</view>
						<view :class="comfirmObj.sex === 1 ? 'select' : ''" @click="handleChooseSex(1)">女</view>
						<view :class="comfirmObj.sex === 2 ? 'select' : '' " @click="handleChooseSex(2)">性别不限</view>
					</view>
					<view class="title">年龄</view>
					<view class="reward-choose">
						<input type="number" maxlength="3" v-model="comfirmObj.startAge" />
						<view>-</view>
						<input type="number" maxlength="3" v-model="comfirmObj.endAge" />
					</view>
					<view class="handles">
						<view @click="handleClear">重置</view>
						<view @click="handleComfirm">完成</view>
					</view>
				</view>
			</view>
		</view>
		<!-- 列表 -->
		<view class="list-type" @touchstart="scrollTop" @touchend="scrollTop2">
			<!-- 雇员列表 -->
			<scroll-view class="scroll-view"
				:style="{ top: scrollViewMarginTop, height: `calc(100vh - ${scrollViewMarginTop})` }" :scroll-y="true"
				@scrolltolower="get_user_list" lower-threshold="300">
				<view class="hg-30" style="height: 10rpx;"></view>
				<view class="list">
					<view class="job-info" v-for="(item,index) in userList" :key="item.myKey"
						@click="handleOpenStaffDetail(item.userId)">
						<view>
							<view class="left">
								<view class="avatar" :style="{top: item.vipFlag ? (30 +'rpx') : 0}">
									<image class="avatar-pic" :src="item.pic" mode="aspectFill"></image>
									<image v-if="item.vipFlag" class="crown"
										src="http://images.linglinggong.net/images/main/crown.png" mode="aspectFill">
									</image>
								</view>
								<view>
									<!-- 姓名 -->
									<view>
										<text>{{item.userName}}</text>
										<image class="sex-icon"
											:src="item.sex==1 ? 'http://images.linglinggong.net/icon1/21.png' : 'http://images.linglinggong.net/icon1/55.png'"
											mode="aspectFill"></image>
									</view>
									<!-- 诚信值 -->
									<view class="sincerity">
										<text>诚信值</text>
										<text>{{item.integrity/100 }}</text>
									</view>
									<!-- 成交量 -->
									<view class="volume">
										<text>成交单</text>
										<text>{{ item.receiveNum }}</text>
									</view>
								</view>
							</view>
							<view class="right">雇佣他</view>
						</view>
						<view>
							<view class="lables">
								<view v-for="(workType,index) in item.workTypeList" v-if="workType" :key="index">
									{{ workType }}
								</view>
								<!-- <view v-if="item.workTypeList" v-for="(workType,index) in item.workTypeList" :key="workType">{{ workType }}</view> -->
							</view>
							<view class="distance">{{ (Math.round(item.distance*1000)/1000).toFixed(1) }}km</view>
						</view>
					</view>
				</view>
				<uni-load-more :status="hasFlag ? 'loading' : 'noMore'"></uni-load-more>
			</scroll-view>
		</view>
		<!-- 刷新圈 -->
		<image v-if="isRotate" :class=" isRotate ? 'rotate' : ''"
			src="http://images.linglinggong.net/images/main/circle.png" mode="aspectFill"></image>
	</view>
</template>
<script>
	import findKey from '@/libs/find-key.js'
	export default {
		props: {
			word: {
				type: String,
				default: ''
			},
			// 每次页面出现时，isShow变化
			isShowBoss: {
				type: Number,
				default: 0
			},
		},
		data() {
			return {
				scrollViewMarginTop: '114.5px',
				handleIsStop: true, // 是否允许切换，网速太慢时
				isRotate: false, //是否旋转
				scrollStart: '', //手指触摸初始位置
				scrollEnd: '', //手指离开距离
				distantce: '', //手指滑动距离
				hasFlag: true, // 是否还有更多数据要加载
				location: [], //[lat, lng]当前位置
				workTypeList: [], //期望工种
				imgPath: '', //图片路径
				screenFlag: false, // 筛选开关
				comfirmObj: {
					sex: '',
					startAge: '',
					endAge: '',
				},
				usersObj: { //获取雇员们上传参数
					endAge: '',
					expectWorkType: '',
					isAsc: 'asc',
					lat: '', //当前用户的经纬度
					lng: '', //当前用户的经纬度
					orderByColumn: 'distance', //默认排序，0离我最近distance，1成交量receiveNum，2诚信值降序integrity
					pageNum: 0,
					pageSize: 10,
					region: '330783', //用户们所在地点 义乌
					sex: '',
					startAge: '',
					userJobStatus: "2", //1,2,0是休息
					userName: '',
				},
				userList: [], //雇员列表
				flagOpen: true, //是否打开页面
			}
		},
		watch: {
			word: function(val, oldVal) {
				this.refresh()
			},
			isShowBoss: function(newVal) {
				console.log('isShowBoss', newVal)
				this.usersObj = uni.getStorageSync('usersObj').region ? uni.getStorageSync('usersObj') : this.usersObj
				setTimeout(() => {
					this.refresh()
				}, 300)
			},
			distantce: function(newVal) {
				// console.log('子distantce变动', newVal)
				if (newVal > 280) {
					this.isRotate = true
					this.refresh()
					setTimeout(() => {
						this.isRotate = false
					}, 300)
				}
			},
		},
		methods: {
			// 生成随机字符串
			randomString(len) {
				len = len || 32;
				var $chars = 'ABCDEFGHJKMNPQRSTWXYZabcdefhijkmnprstwxyz2345678'; /****默认去掉了容易混淆的字符oOLl,9gq,Vv,Uu,I1****/
				var maxPos = $chars.length;
				var pwd = '';
				for (let i = 0; i < len; i++) {
					pwd += $chars.charAt(Math.floor(Math.random() * maxPos));
				}
				return pwd;
			},
			scrollTop(e) {
				//此处的scrollDic是监听下拉开始到下拉结束手指移动的距离
				this.scrollStart = e.changedTouches[0].pageY
				// this.scrollDic = this.scrollY;
			},
			scrollTop2(e) {
				// console.log('用户手指离开到屏幕',e.changedTouches[0].pageY)
				this.scrollEnd = e.changedTouches[0].pageY
				this.distantce = this.scrollEnd - this.scrollStart
				// console.log('滑动距离',this.distantce)
			},
			// 
			hideModal() {
				this.screenFlag = false
			},
			// 刷新
			refresh() {
				// console.log('雇员列表刷新', this.usersObj)
				if (!this.flagOpen) return
				this.flagOpen = false
				setTimeout(() => {
					this.flagOpen = true
				}, 2000)
				// console.log('刷新')
				this.usersObj.pageNum = 0
				this.usersObj.pageSize = 10
				this.hasFlag = true
				this.userList = []
				this.get_user_list()
			},
			// 由省市区筛选 获取区行政代码
			getAreaCode(areaCode) {
				this.usersObj.region = areaCode
				// console.log('区 行政代码', this.usersObj.region)
				this.refresh()
				// 改变雇员端筛选地区，因为省市区通用
				let screenObj = uni.getStorageSync('screenObj')
				screenObj.region = areaCode
				uni.setStorageSync('screenObj', screenObj)
			},
			// 遮罩层下不滚动
			moveHandle() {
				return
			},
			// 选择性别
			handleChooseSex(flag) {
				this.comfirmObj.sex = flag
			},
			// 筛选完成
			handleComfirm() {
				this.usersObj.sex = this.comfirmObj.sex == 2 ? '' : this.comfirmObj.sex
				this.usersObj.startAge = this.comfirmObj.startAge
				this.usersObj.endAge = this.comfirmObj.endAge
				this.refresh()
				this.screenFlag = false
			},
			// 重置
			handleClear() {
				this.comfirmObj = {
					sex: '',
					startAge: '',
					endAge: '',
				}
				this.usersObj.sex = this.comfirmObj.sex
				this.usersObj.startAge = this.comfirmObj.startAge
				this.usersObj.endAge = this.comfirmObj.endAge
				this.refresh()
			},
			// 获取雇员列表
			async get_user_list() {
				// console.log('获取雇员列表', this.usersObj.region)
				if (!this.hasFlag) return // 说明已经没有更多啦

				++this.usersObj.pageNum
				// 是否允许切换，
				if (!this.handleIsStop) return // 说明上一条请求结果未返回
				this.handleIsStop = false
				this.usersObj.lat = uni.getStorageSync('location')[0]
				this.usersObj.lng = uni.getStorageSync('location')[1]
				this.usersObj.userJobStatus = 2
				this.usersObj.key = this.word //用户名,或期望岗位
				// 如果没有定位默认义乌
				// if(!this.usersObj.region) {
				// 	this.usersObj.region = '330782'
				// }
				if (!this.usersObj.region) {
					this.usersObj.region = '330783'
				}
				// console.log('条件',this.usersObj)
				let res = await this.$fetch(this.$api.get_user_list, this.usersObj, 'POST')
				if (res.code) return uni.showToast({
					title: res.msg,
					icon: 'none'
				})
				// 是否允许切换
				this.handleIsStop = true
				uni.setStorageSync('usersObj', this.usersObj)
				this.usersObj = uni.getStorageSync('usersObj').region ? uni.getStorageSync('usersObj') : this.usersObj
				// 整理数据
				res.rows.forEach(item => {
					item.myKey = this.randomString()
					// console.log(item.myKey)
					item.pic = item.avatar ? this.imgPath + item.avatar : ''
					// 初始化期望工种
					item.workTypeList = []
					item.expectWorkType.split(',').forEach((item2) => {
						item.workTypeList.push(item2)
					})
					item.workTypeList = item.workTypeList == null ? '' : item.workTypeList
					// console.log('item~~~',item)
					// console.log('vipFlag',item.vipFlag)
				})
				// 把筛选条件显示出来
				this.initData()
				this.userList = [...this.userList, ...res.rows]
				this.hasFlag = this.userList.length < res.total
				// console.log('雇员userList', this.userList,res.total)
			},
			// 把筛选条件显示出来
			initData() {
				this.comfirmObj.sex = this.usersObj.sex
				this.comfirmObj.startAge = this.usersObj.startAge
				this.comfirmObj.endAge = this.usersObj.endAge
				// console.log('筛选条件显示出来',this.comfirmObj)
			},
			// 更改类目 task
			handleTabChange(flag) {
				if (flag === 3) {
					this.screenFlag = !this.screenFlag
				} else if (flag === 0) {
					this.screenFlag = false
					if (this.usersObj.orderByColumn === 'distance') return
					this.usersObj.isAsc = 'asc'
					this.usersObj.orderByColumn = 'distance'
					this.refresh()
				} else if (flag === 1) {
					this.screenFlag = false
					if (this.usersObj.orderByColumn === 'receiveNum') return
					this.usersObj.isAsc = 'desc'
					this.usersObj.orderByColumn = 'receiveNum'
					this.refresh()
				} else if (flag = 2) {
					this.screenFlag = false
					if (this.usersObj.orderByColumn === 'integrity') return
					this.usersObj.orderByColumn = 'integrity'
					this.usersObj.isAsc = 'desc'
					this.refresh()
				}
			},
			// 地图
			handleMap() {
				uni.navigateTo({
					url: '/pages/map-look-for/map-look-for',
					animationType: "none"
				})
			},
			// 打开雇员详情
			handleOpenStaffDetail(staffId) {
				if (!this.flagOpen) return
				this.flagOpen = false
				setTimeout(() => {
					this.flagOpen = true
				}, 1000)
				uni.navigateTo({
					url: '/pages/employer-detail/employee-detail?staffId=' + staffId
				})
			},
			// 刚进入初始化
			async getImgPath() {
				if (!uni.getStorageSync('imgPath')) {
					this.imgPath = (await this.$fetch(this.$api.property_list_by_type_and_key, {
						type: 1,
						key: 'pic_url'
					}, 'POST')).data
				} else {
					this.imgPath = uni.getStorageSync('imgPath')
				}
				this.usersObj = uni.getStorageSync('usersObj').region ? uni.getStorageSync('usersObj') : this.usersObj
				// console.log('this.usersObj刚进入初始化',this.usersObj)
				this.refresh()
			},
			//获得元素的size
			getElSize(id) {
				return new Promise((res, rej) => {
					let el = uni.createSelectorQuery().select('#' + id);
					el.fields({
						size: true,
						scrollOffset: true,
						rect: true
					}, (data) => {
						console.log(data, '-----')
						res(data);
					}).exec();
				});
			},
		},
		async mounted() {
			this.location = uni.getStorageSync('location') //当前位置的经纬度
			this.getImgPath()
			this.scrollViewMarginTop = (await this.getElSize('#fix-title')).height + 'px'
			console.log(this.scrollViewMarginTop, '---')
		},
	}
</script>
<style scoped lang="less">
	.container {
		display: flex;
		flex-direction: column;

		&>image {
			align-self: center;
			text-align: center;
			z-index: 10;
			position: fixed;
			top: 500rpx;
			width: 100rpx;
			height: 100rpx;

			&.rotate {
				animation: rotate .5s linear infinite;

				@keyframes rotate {
					0% {
						transform: rotateZ(0deg);
						/*从0度开始*/
					}

					100% {
						transform: rotateZ(360deg);
						/*360度结束*/
					}
				}
			}
		}

		&>.fix-title {
			position: fixed;
			top: 0;
			padding-top: calc(var(--status-bar-height) + 16rpx);
			z-index: 3333;
			background-color: #FFFFFF;

			// 类目
			.condition {
				display: flex;
				border-bottom: 1rpx solid #f3f3f3;

				&>view {
					width: 25vw;
					height: 100rpx;
					display: flex;
					justify-content: center;
					align-items: center;

					// color: rgba(64,33,16,0.50);
					image {
						width: 14rpx;
						height: 8rpx;
						margin-left: 10rpx;
					}

					&.select {
						color: #F39B19;
					}
				}
			}

			// 遮罩层
			.mask {
				// border: 1px solid #000000;
				z-index: 9;
				width: 100vw;
				position: fixed;
				top: calc(var(--status-bar-height) + 192rpx);
				height: calc(100vh - var(--status-bar-height) + 192rpx);
				pointer-events: none;
				background: transparent;
				transition: all .3s;

				&.show {
					background: rgba(0, 0, 0, 0.40);
					pointer-events: auto;
				}
			}

			// 白色筛选框
			&>.screen {
				width: 100vw;
				position: fixed;
				z-index: 99;
				background: #FFFFFF;
				top: calc(var(--status-bar-height) + 185rpx);
				overflow: hidden;

				// 统一的白色样式
				&>.main {
					// transition: height .3s;
					background: #FFFFFF;
					line-height: 40rpx;
					overflow: scroll;

					&>view {
						height: 90rpx;
						display: flex;
						justify-content: space-between;
						align-items: center;
						margin-left: 56rpx;
						margin-right: 30rpx;

						&>icon {
							margin-top: -26rpx;
							width: 26rpx;
							height: 20rpx;
						}
					}
				}

				//筛选
				&>.filter-screen {
					height: 0;
					transition: height .3s;

					&.show {
						height: 480rpx;
					}

					&>.title {
						line-height: 40rpx;
						color: #402110;
						padding-top: 30rpx;
						margin: 0 30rpx 20rpx;
					}

					&>.sex-list {
						// border: 1px solid #007AFF;
						height: 60rpx;
						display: flex;
						margin: 0rpx 30rpx;

						&>view {
							width: 150rpx;
							height: 60rpx;
							display: flex;
							justify-content: center;
							align-items: center;
							background: #F2F2F2;
							border-radius: 2px;
							margin: 0;
							margin-right: 30rpx;
							color: rgba(64, 33, 16, 0.50);

							&.select {
								background: #FCC928;
								color: #402110;
							}
						}
					}

					&>.reward-choose {
						// border: 1px solid #000000;
						display: flex;
						align-items: center;
						margin: 0 30rpx;

						input {
							width: 200rpx;
							height: 70rpx;
							background: #F2F2F2;
							border-radius: 2px;
							text-align: center;
						}

						view {
							margin: 0 30rpx;
						}
					}

					.handles {
						margin: 40rpx 30rpx 0;
						display: flex;
						justify-content: space-between;

						&>view {
							width: 330rpx;
							height: 80rpx;
							display: flex;
							justify-content: center;
							align-items: center;
							border-radius: 40rpx;

							&:active {
								opacity: .7;
							}
						}

						&>view:first-child {
							border: 1px solid #F39B19;
							color: #F39B19;
						}

						&>view:last-child {
							background: #FCC928;
							color: #402110;
						}
					}
				}
			}
		}

		&>.list-type {
			z-index: 2;

			&>.scroll-view {
				z-index: 2;
				background: #F2F2F2;
				height: 100px;
				position: fixed;

				.list {
					background: #FFFFFF;

					&>view {
						padding: 30rpx;
						position: relative;

						&::before {
							content: "";
							position: absolute;
							left: 168rpx;
							bottom: 0;
							width: 582rpx;
							height: 1px;
							background: #f2f2f2;
						}

						&>view:first-child {
							display: flex;
							justify-content: space-between;

							.left {
								display: flex;

								&>.avatar {
									// border: 1px solid #55aa7f;
									position: relative;
									margin-right: 30rpx;

									&>.avatar-pic {
										max-width: 108rpx;
										min-width: 108rpx;
										max-height: 108rpx;
										min-height: 108rpx;
										border-radius: 50%;
										background-color: #f3f3f3;
									}

									&>.crown {
										position: absolute;
										left: -10rpx;
										top: -40rpx;
										width: 78rpx;
										height: 59rpx;
									}
								}

								&>view {
									&>view:first-child {
										display: flex;
										align-items: center;
										font-size: 17px;
										color: #402110;
										margin-bottom: 10rpx;

										.sex-icon {
											width: 26rpx;
											height: 26rpx;
											margin-left: 20rpx;
										}
									}

									.sincerity,
									.volume {
										margin-top: 10rpx;
										display: flex;
										align-items: center;

										&.volume {
											color: #F39B19;
										}

										text:first-child {
											font-size: 14px;
											color: rgba(64, 33, 16, 0.70);
											margin-right: 30rpx;
										}
									}
								}
							}

							.right {
								width: 160rpx;
								height: 60rpx;
								background: #FCC928;
								border-radius: 30rpx;
								color: #402110;
								display: flex;
								justify-content: center;
								align-items: center;
							}
						}

						&>view:last-child {
							display: flex;
							justify-content: space-between;
							margin-top: 10rpx;
							margin-left: 138rpx;

							&>.lables {
								display: flex;

								// border: 1px solid #F39B19;
								&>view {
									border: 1px solid #F39B19;
									border-radius: 2px;
									padding: 0 16rpx;
									margin-right: 20rpx;
									font-size: 12px;
									color: #F39B19;
									display: flex;
									align-items: center;
									justify-content: center;
								}

								&>view:last-child {
									margin-right: 0rpx;
								}
							}

							.distance {
								color: rgba(64, 33, 16, 0.50);
							}
						}
					}
				}
			}
		}

		&>.map-type {}
	}
</style>